<template>
	<view>
		<view @click="selectPage()">
			<u-search class="search" placeholder="请输入12345678" :show-action="false"></u-search>
		</view>
		<view class="content">
			<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
		</view>
		<view>
			<u-swiper class="swiper" :list="list1"></u-swiper>
		</view>
		<view class="list" v-for="(item,index) in cinemaList" :key="index">
			<view class="list_top">
				<view class="top-first">
					<view class="list_name">{{item.name}}</view>
					<view class="list_status" v-if="item.status==1">影城卡</view>
				</view>
				<view class="list_money">{{item.moneys}}元起</view>
			</view>
			<view class="list_down">
				<view class="list_address">{{item.address}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				cinemaList: [],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				themeColor: '#000000',
				filterResult: '',
				menuList: [{
						'title': '区域',
						'key': 'areas',
						'isSort': true,
						'detailList': [

						]
					},
					{
						'title': '排序',
						'key': 'sort',
						'isSort': true,
						'detailList': [{
								'id': 1,
								'title': '默认排序',
								'value': ''
							},
							{
								'id': 2,
								'title': '发布时间',
								'value': 'add_time'
							},
							{
								'id': 3,
								'title': '薪资最高',
								'value': 'wages_up'
							},
							{
								'id': 4,
								'title': '离我最近',
								'value': 'location'
							}
						]
					}
				]
			}
		},
		onLoad() {
			this.getAreasList();
			this.getCinemaList(1);
		},
		methods: {
			selectPage() {
				uni.navigateTo({
					url: "./select_cinema"
				})
			},
			result(val) {
				this.getCinemaList(val.areas)
				this.filterResult = JSON.stringify(val.areas, null, 2)
			},
			getAreasList() {
				let that = this
				uni.request({
					url: 'http://www.moive.com/api/movie_mysql/qu.php',
					method: 'GET',
					success: (res) => {
						// console.log("111")


						res.data.forEach(function(item) {
							let list = {
								'title': '',
								'value': ''
							}
							list.title = item.areas;
							list.value = item.id
							that.menuList[0].detailList.push(list);
							// console.log(list.value)
						})

					},
					fail: (err) => {}
				})
			},
			getCinemaList(imput) {
				console.log("imput",imput)
			
				 // var url = inputs === undefined? "http://www.moive.com/movie_mysql/cinema.php":"http://www.moive.com/movie_mysql/cinema.php?value="+inputs
				 uni.request({
					  // header: {
					  // 'Content-Type': 'application/x-www-form-urlencoded'  
					  // }, 
					  url:"http://www.moive.com/api/movie_mysql/cinema.php",
					// url:'/api/movie_mysql/cinema.php?value='+imput,
					// url:url,
					method: 'GET',
					// data:{
					// 	value:imput,
					// },
					success: (res) => {
						console.log("111")

						this.cinemaList = res.data;
						console.log(this.cinemaList)
					},
					fail: (err) => {}
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.search {
		width: 98%;
		position: relative;
		left: 1%;
		top: 2px;
	}

	.swiper {
		width: 96%;
		margin: 0 auto;
	}

	.list {
		width: 96%;
		height: 60px;
		border-bottom: 1px #cecece solid;
		margin: 0 auto;
	}

	.list_top {
		width: 100%;
		height: 30px;
	}

	.list-first {}

	.list_down {
		width: 100%;
		height: 30px;
	}

	.list_name {
		margin-top: 10px;
		font-size: 15px;
		float: left;
		font-weight: 900;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list_status {
		float: left;
		margin-left: 3px;
		margin-top: 13px;
		background-color: rgb(68, 200, 90);
		border-radius: 2px;
		color: white;
		font-size: 10px;
	}

	.list_money {
		margin-top: 10px;
		float: right;
		font-size: 12px;
		color: rgb(255, 77, 100);
	}

	.list_address {
		width: 80%;
		margin-top: 5px;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: rgb(179, 179, 179);
	}
</style>
